<template>
  <div class="Orderstatistics-content">
    <div class="Orderstatistics-header">
      时间范围
      <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="times"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" :disabled="showd" @click="queryclick">查询</el-button>
    </div>
    <div id="Orderstatistics-main">11</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ordertotal } from "@/apis/echardata";
import { getYYYYMMDD_HHMMSS,getYYYYMMDD } from "@/utils/utils";
export default {
  data() {
    return {
      showd:false,
      times: [],
      datas: {},
    };
  },
  created() {
    // 给时间框设置一个默认值时间段,利用时间戳，计算出七天的毫秒数，再用new Date(七天毫秒数)就等于七天前
    let a = new Date().getTime() - 1000 * 60 * 60 * 24 * 1000;
    this.times = [
      getYYYYMMDD_HHMMSS(new Date(a)),
      getYYYYMMDD_HHMMSS(new Date()),
    ];
  },
  mounted() {
    //echars插件
    this.echart = echarts.init(document.getElementById("Orderstatistics-main"));
  },
  methods: {
    queryclick() {
      this.showd=true,
      setTimeout(()=>{
        this.showd=false
      },2000)
      ordertotal({ date: JSON.stringify(this.times) }).then((res) => {
        let xtime=res.data.data.map((obj)=>getYYYYMMDD(obj.orderTime))
        let ymoney=res.data.data.map((obj)=>obj.orderAmount)
        this.echart.setOption ({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["下单时间", "订单金额"],
          },
          xAxis: [
            {
              type: "category",
              data: xtime,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "下单时间",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "订单金额",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "{value}￥",
              },
            },
          ],
          series: [
            {
              name: "下单时间",
              type: "bar",
              data:xtime,
            },
            {
              name: "订单金额",
              type: "bar",
              data: ymoney,
            },
          ],
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.Orderstatistics-content {
  width: 100%;
  height: 100%;
  .Orderstatistics-header {
    margin-top: 20px;
  }
}
.el-button {
  margin-left: 30px;
  width: 80px;
  height: 30px;
}
.el-card__body {
  padding: 0;
}
#Orderstatistics-main {
  border-top: 1px solid @tintcolor;
  margin-top: 30px;
  width: 100%;
  height: 370px;
}
</style>